<template>
	<view class="container">
		<!-- 顶部搜索栏 -->
		<view class="search-header">
			<view class="search-box">
				<u-icon name="arrow-left" size="22" color="#303133" @click="goBack"></u-icon>
				<view class="search-input-wrapper">
					<u-input 
						placeholder="搜索店内商品，约400件" 
						v-model="searchValue" 
						border="none"
						placeholderStyle="color: #999"
						@change="onSearchChange"
						@confirm="onSearch"
						clearable
						:customStyle="{
							backgroundColor: '#f5f5f5',
							borderRadius: '20px',
							height: '36px',
							fontSize: '14px',
							padding: '0 10px'
						}"
						suffixIcon="search"
						suffixIconStyle="color: #999"
					></u-input>
				</view>
				<view class="header-icons">
					<u-icon name="bell" size="20" color="#303133" @click="showNotifications"></u-icon>
					<u-icon name="more-dot-fill" size="20" color="#303133" @click="showMore"></u-icon>
				</view>
			</view>
		</view>

		<!-- 门店信息 -->
		<view class="store-info">
			<view class="store-header">
				<view class="store-logo">
					<image class="logo-image" :src="storeInfo.logo" mode="aspectFill"></image>
				</view>
				<view class="store-title-area">
					<view class="store-badge">新店</view>
					<text class="store-name">{{ storeInfo.name }}</text>
				</view>
			</view>
			<view class="store-details">
				<view class="rating-section">
					<text class="platform">饿了么</text>
					<text class="rating">{{ storeInfo.rating }}</text>
					<text class="review-count">{{ storeInfo.reviewCount }}+</text>
					<text class="delivery-time">{{ storeInfo.deliveryTime }}</text>
					<view class="environment-label">
						<text>环境好</text>
					</view>
				</view>
			</view>
			
			<!-- 优惠券区域 -->
			<!-- <view class="coupon-section">
				<view v-for="(coupon, index) in storeInfo.coupons" :key="index" class="coupon-item">
					<view class="coupon-content">
						<text class="coupon-type">{{ coupon.type }}</text>
						<text class="coupon-desc">{{ coupon.desc }}</text>
						<text class="coupon-amount">{{ coupon.amount }}</text>
					</view>
					<view class="coupon-action">
						<text>领</text>
					</view>
				</view>
				<text class="more-coupons">更多</text>
			</view> -->

			<!-- 门店标签 -->
			<!-- <view class="store-tags">
				<text v-for="(tag, index) in storeInfo.tags" :key="index" class="tag">{{ tag }}</text>
			</view> -->
		</view>

		<!-- 水果新人爆品 -->
		<!-- <view class="featured-section">
			<view class="section-header">
				<text class="section-title">水果新人爆品</text>
				<text class="section-more">更多 ></text>
			</view>
			<scroll-view class="featured-list" scroll-x>
				<view class="featured-items">
					<view v-for="(item, index) in featuredProducts" :key="index" class="featured-item" @click="goToProduct(item)">
						<view class="discount-badge">{{ item.discount }}</view>
						<image class="featured-image" :src="item.image" mode="aspectFill"></image>
						<text class="featured-name">{{ item.name }}</text>
						<view class="featured-price">
							<text class="current-price">¥{{ item.price }}</text>
							<text class="original-price">¥{{ item.originalPrice }}</text>
						</view>
						<view class="add-btn" @click.stop="addToCart(item)">
							<u-icon name="plus" size="16" color="#fff"></u-icon>
						</view>
					</view>
				</view>
			</scroll-view>
		</view> -->

		<!-- 商品分类导航 -->
		<!-- <view class="category-nav">
			<text class="nav-item">商品</text>
			<text class="nav-item">评价</text>
			<text class="nav-item">商家</text>
		</view> -->

		<!-- 筛选和分类 -->
		<!-- <view class="filter-section">
			<view class="filter-buttons">
				<view class="filter-btn active">
					<u-icon name="heart" size="14" color="#fa436a"></u-icon>
					<text>秒杀</text>
				</view>
				<view class="filter-btn">
					<text>新人专享</text>
				</view>
				<view class="filter-btn">
					<text>超值单品</text>
				</view>
				<view class="filter-btn">
					<text>折扣</text>
				</view>
			</view>
		</view> -->

		<!-- 商品列表 -->
		<view class="product-list">
			<view v-for="(product, index) in productList" :key="index" class="product-item" @click="goToProduct(product)">
				<view class="product-image-wrapper">
					<view class="discount-tag" v-if="product.discount">{{ product.discount }}</view>
					<image class="product-image" :src="product.image" mode="aspectFill"></image>
				</view>
				<view class="product-info">
					<text class="product-name">{{ product.name }}</text>
					<text class="product-desc">{{ product.desc }}</text>
					<view class="product-stats">
						<text class="month-sales">月销{{ product.sales }}</text>
					</view>
					<view class="product-price-row">
						<text class="current-price">¥{{ product.price }}</text>
						<text class="unit">/{{ product.unit }}</text>
						<text class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
					</view>
				</view>
				<view class="product-actions">
					<view class="add-cart-btn" @click.stop="addToCart(product)">
						<u-icon name="plus" size="18" color="#fa436a"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="cart-info" @click="showCart">
				<view class="cart-icon-wrapper">
					<u-icon name="shopping-cart" size="24" color="#fff"></u-icon>
					<view class="cart-count" v-if="cartCount > 0">{{ cartCount }}</view>
				</view>
				<view class="cart-amount" v-if="cartAmount > 0">
					<text>¥{{ cartAmount.toFixed(2) }}</text>
				</view>
			</view>
			<view class="delivery-fee">
				<text>配送费¥{{ deliveryFee }}</text>
			</view>
		</view>

		<!-- 购物车弹窗 -->
		<view class="cart-popup" :class="{ show: showCartPopup }" @click="hideCart">
			<view class="cart-content" @click.stop>
				<!-- 疾单助手 -->
				<!-- <view class="fast-order-banner">
					<view class="banner-left">
						<text class="banner-title">疾单助手</text>
						<text class="banner-desc">再买5.5元指定商品，可再减2元</text>
					</view>
					<view class="banner-right" @click="goToFastOrder">
						<text>领券满单</text>
						<u-icon name="arrow-right" size="12" color="#fa436a"></u-icon>
					</view>
				</view> -->

				<!-- 全选操作 -->
				<view class="select-all-section">
					<view class="select-all" @click="toggleSelectAll">
						<view class="checkbox" :class="{ checked: isAllSelected }">
							<u-icon v-if="isAllSelected" name="checkmark" size="16" color="#fff"></u-icon>
						</view>
						<text class="select-text">全选</text>
						<text class="total-info">（共{{ cartCount }}件商品，总重量约{{ totalWeight }}kg）</text>
					</view>
					<view class="clear-cart" @click="clearCart">
						<u-icon name="trash" size="16" color="#999"></u-icon>
						<text>清空购物车</text>
					</view>
				</view>

				<!-- 购物车商品列表 -->
				<scroll-view class="cart-list" scroll-y>
					<view v-for="(item, index) in cartItems" :key="item.id" class="cart-item">
						<view class="item-checkbox" @click="toggleItemSelect(index)">
							<view class="checkbox" :class="{ checked: item.selected }">
								<u-icon v-if="item.selected" name="checkmark" size="16" color="#fff"></u-icon>
							</view>
						</view>
						<image class="item-image" :src="item.image" mode="aspectFill"></image>
						<view class="item-info">
							<text class="item-name">{{ item.name }}</text>
							<text class="item-spec" v-if="item.spec">规格: {{ item.spec }}</text>
							<view class="item-tags" v-if="item.tags && item.tags.length > 0">
								<text v-for="tag in item.tags" :key="tag" class="item-tag">{{ tag }}</text>
							</view>
							<view class="item-price-row">
								<text class="item-price">¥{{ item.price }}</text>
								<text class="item-unit">/{{ item.unit }}</text>
								<text class="item-original-price" v-if="item.originalPrice">¥{{ item.originalPrice }}/{{ item.unit }}</text>
							</view>
							<view class="item-promotion" v-if="item.promotion">
								<text>{{ item.promotion }}</text>
							</view>
						</view>
						<view class="quantity-control">
							<view class="quantity-btn" @click="decreaseQuantity(index)">
								<u-icon name="minus" size="16" color="#fa436a"></u-icon>
							</view>
							<text class="quantity">{{ item.quantity }}</text>
							<view class="quantity-btn" @click="increaseQuantity(index)">
								<u-icon name="plus" size="16" color="#fa436a"></u-icon>
							</view>
						</view>
					</view>

					<!-- 优惠提示 -->
					<view class="promotion-tips">
						<view class="tip-item">
							<text class="tip-label">超值单品</text>
							<text class="tip-desc">全店任选1件</text>
							<text class="tip-status">已为您选择最佳优惠</text>
						</view>
						<view class="tip-item">
							<text class="tip-label">折扣</text>
							<text class="tip-desc">全店任选1件</text>
							<text class="tip-status">已为您选择最佳优惠</text>
						</view>
					</view>
				</scroll-view>

				<!-- 购物车底部 -->
				<view class="cart-bottom">
					<view class="price-summary">
						<view class="total-price">
							<text class="label">商品总价</text>
							<text class="amount">¥{{ totalPrice.toFixed(2) }}</text>
						</view>
						<view class="discount-info">
							<view class="discount-item">
								<u-icon name="account-fill" size="16" color="#fa436a"></u-icon>
								<text class="discount-text">商品优惠</text>
								<text class="discount-amount">-¥{{ discountAmount.toFixed(2) }}</text>
								<u-icon name="arrow-down" size="12" color="#666"></u-icon>
							</view>
						</view>
						<view class="delivery-info">
							<text class="delivery-text">配送费¥{{ deliveryFee }}(含超重加价)¥{{ overWeightFee }}打包费¥{{ packingFee }}</text>
						</view>
					</view>
					<view class="checkout-btn" @click="goToCheckout">
						<text>结算</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchValue: '',
			showCartPopup: false,
			storeInfo: {
				name: '优果逸品（世茂天城店）',
				logo: '/static/temp/store-logo.jpg',
				rating: '4.8',
				reviewCount: '500',
				deliveryTime: '772分钟',
				coupons: [
					{ type: '满减', desc: '满减券', amount: '20', action: '领' },
					{ type: '满减', desc: '满减券', amount: '20', action: '领' },
					{ type: '配送费', desc: '满50元可用', amount: '8', action: '更多' }
				],
				tags: ['全店满减', '新人立减', '清洁卫生']
			},
			featuredProducts: [
				{
					id: 1,
					name: '【新鲜甜蜜制造】冰糖葫芦草莓 约500g',
					image: '/static/temp/fruit1.jpg',
					price: '17',
					originalPrice: '19.9',
					discount: '限时抢购'
				},
				{
					id: 2,
					name: '【古法】蒸蛋羹制造500g',
					image: '/static/temp/fruit2.jpg',
					price: '15',
					originalPrice: '18.8',
					discount: '限时抢购'
				},
				{
					id: 3,
					name: '【冰镇制造】新鲜果冻半个1/4个制造...',
					image: '/static/temp/fruit3.jpg',
					price: '21',
					originalPrice: '25.9',
					discount: '限时抢购'
				}
			],
			productList: [
				{
					id: 11,
					name: '【餐饮】酸甜大蒜冬至约500g',
					desc: '好种产品制作 中国',
					image: '/static/temp/product11.jpg',
					price: '32.9',
					originalPrice: '39.9',
					unit: '件',
					sales: '4',
					discount: '限时抢购'
				},
				{
					id: 12,
					name: '【果切】红心火龙果约250g',
					desc: '火龙果切片',
					image: '/static/temp/product12.jpg',
					price: '13.8',
					originalPrice: '15.8',
					unit: '件',
					sales: '6',
					discount: '限时抢购'
				},
				{
					id: 13,
					name: '【三拼果切】奇异果+凤梨+红心火龙果约600g',
					desc: '水果混合切片',
					image: '/static/temp/product13.jpg',
					price: '28.8',
					originalPrice: '31.8',
					unit: '件',
					sales: '2',
					discount: '限时抢购'
				},
				{
					id: 14,
					name: '【新品尝鲜】原味冷萃蜜奶手撕面包约180g',
					desc: '优质蛋白质食品 无添加',
					image: '/static/temp/product14.jpg',
					price: '25.8',
					originalPrice: '28.8',
					unit: '件',
					sales: '2',
					discount: '限时抢购'
				},
				{
					id: 15,
					name: '【六拼】香瓜+哈密瓜+凤梨+红心火龙果+芒果',
					desc: '约1000g',
					image: '/static/temp/product15.jpg',
					price: '47.8',
					originalPrice: '54.8',
					unit: '件',
					sales: '1',
					discount: '限时抢购'
				},
				{
					id: 16,
					name: '【礼盒】精品水果礼盒约8-10斤(部分菠萝为应季水果)',
					desc: '自营1',
					image: '/static/temp/product16.jpg',
					price: '225',
					originalPrice: '258',
					unit: '件',
					sales: '1',
					discount: '限时抢购'
				},
				{
					id: 17,
					name: '【餐饮】佳沛绿果1-4个(百选规格)',
					desc: '',
					image: '/static/temp/product17.jpg',
					price: '10.8',
					originalPrice: '11.8',
					unit: '件',
					sales: '6',
					discount: '选规格'
				}
			],
			cartCount: 0,
			cartAmount: 0,
			deliveryFee: 0.4,
			overWeightFee: 5.4,
			packingFee: 1,
			cartItems: [
				{
					id: 1,
					name: '【卫龙】卫龙 香辣味大面筋辣条...',
					spec: '102g/袋',
					image: '/static/temp/cart1.jpg',
					price: 4.5,
					originalPrice: null,
					unit: '件',
					quantity: 1,
					selected: true,
					tags: ['仅剩3件']
				},
				{
					id: 2,
					name: '雪汇 小脆筒雪糕 30g/支',
					spec: '30g*1支',
					image: '/static/temp/cart2.jpg',
					price: 1,
					originalPrice: null,
					unit: '件',
					quantity: 1,
					selected: true,
					tags: []
				},
				{
					id: 3,
					name: '【伊利】伊利克力棒巧克力口味...',
					spec: null,
					image: '/static/temp/cart3.jpg',
					price: 0.01,
					originalPrice: 1.5,
					unit: '件',
					quantity: 1,
					selected: true,
					tags: [],
					promotion: '优惠价'
				},
				{
					id: 4,
					name: '【农夫山泉】饮用纯净水 550ml*...',
					spec: '550ml*12瓶/包',
					image: '/static/temp/cart4.jpg',
					price: 16.9,
					originalPrice: 24,
					unit: '件',
					quantity: 1,
					selected: true,
					tags: [],
					promotion: '不参加神券优惠'
				}
			]
		};
	},
	computed: {
		// 计算购物车总数量
		totalCartCount() {
			return this.cartItems.reduce((total, item) => total + item.quantity, 0);
		},
		// 计算总重量
		totalWeight() {
			return (this.cartItems.reduce((total, item) => total + item.quantity * 0.5, 0)).toFixed(3);
		},
		// 是否全选
		isAllSelected() {
			return this.cartItems.length > 0 && this.cartItems.every(item => item.selected);
		},
		// 计算商品总价
		totalPrice() {
			return this.cartItems.filter(item => item.selected)
				.reduce((total, item) => total + item.price * item.quantity, 0);
		},
		// 计算优惠金额
		discountAmount() {
			return this.cartItems.filter(item => item.selected && item.originalPrice)
				.reduce((total, item) => total + (item.originalPrice - item.price) * item.quantity, 0);
		}
	},
	onLoad(options) {
		// 获取传递的参数
		if (options.id) {
			this.storeId = options.id;
		}
		if (options.title) {
			this.storeInfo.name = decodeURIComponent(options.title);
		}
		// 初始化购物车数据
		this.updateCartInfo();
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		showNotifications() {
			uni.showToast({
				title: '通知功能',
				icon: 'none'
			});
		},
		showMore() {
			uni.showToast({
				title: '更多功能',
				icon: 'none'
			});
		},
		onSearchChange(value) {
			console.log('搜索值变化:', value);
		},
		onSearch() {
			if (!this.searchValue.trim()) {
				uni.showToast({
					title: '请输入搜索内容',
					icon: 'none'
				});
				return;
			}
			uni.showToast({
				title: `搜索: ${this.searchValue}`,
				icon: 'none'
			});
		},
		goToProduct(product) {
			uni.showToast({
				title: `查看${product.name}`,
				icon: 'none'
			});
		},
		addToCart(product) {
			this.cartCount++;
			this.cartAmount += parseFloat(product.price);
			uni.showToast({
				title: '已加入购物车',
				icon: 'success'
			});
		},
		showCart() {
			if (this.cartItems.length === 0) {
				uni.showToast({
					title: '购物车为空',
					icon: 'none'
				});
				return;
			}
			this.showCartPopup = true;
		},
		hideCart() {
			this.showCartPopup = false;
		},
		updateCartInfo() {
			this.cartCount = this.totalCartCount;
			this.cartAmount = this.totalPrice;
		},
		toggleSelectAll() {
			const selectAll = !this.isAllSelected;
			this.cartItems.forEach(item => {
				item.selected = selectAll;
			});
			this.updateCartInfo();
		},
		toggleItemSelect(index) {
			this.cartItems[index].selected = !this.cartItems[index].selected;
			this.updateCartInfo();
		},
		increaseQuantity(index) {
			this.cartItems[index].quantity++;
			this.updateCartInfo();
		},
		decreaseQuantity(index) {
			if (this.cartItems[index].quantity > 1) {
				this.cartItems[index].quantity--;
			} else {
				// 删除商品
				this.cartItems.splice(index, 1);
			}
			this.updateCartInfo();
		},
		clearCart() {
			uni.showModal({
				title: '提示',
				content: '确定要清空购物车吗？',
				success: (res) => {
					if (res.confirm) {
						this.cartItems = [];
						this.updateCartInfo();
						this.hideCart();
						uni.showToast({
							title: '购物车已清空',
							icon: 'success'
						});
					}
				}
			});
		},
		goToFastOrder() {
			uni.showToast({
				title: '领券满单功能开发中',
				icon: 'none'
			});
		},
		goToCheckout() {
			const selectedItems = this.cartItems.filter(item => item.selected);
			if (selectedItems.length === 0) {
				uni.showToast({
					title: '请选择要结算的商品',
					icon: 'none'
				});
				return;
			}
			uni.showToast({
				title: '跳转到结算页面',
				icon: 'none'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

// 搜索头部
.search-header {
	background: #fff;
	padding: 10rpx 30rpx 20rpx;
	padding-top: calc(var(--status-bar-height) + 20rpx);
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
	position: sticky;
	top: 0;
	z-index: 999;

	.search-box {
		display: flex;
		align-items: center;
		height: 72rpx;

		.search-input-wrapper {
			flex: 1;
			margin: 0 20rpx;
		}

		.header-icons {
			display: flex;
			align-items: center;
			gap: 20rpx;
		}
	}
}

// 门店信息
.store-info {
	background: #fff;
	padding: 30rpx;
	margin-bottom: 16rpx;

	.store-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.store-logo {
			margin-right: 20rpx;

			.logo-image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 8rpx;
				border: 1rpx solid #f0f0f0;
			}
		}

		.store-title-area {
			flex: 1;
			display: flex;
			align-items: center;

			.store-badge {
				background: #00c853;
				color: #fff;
				font-size: 20rpx;
				padding: 4rpx 8rpx;
				border-radius: 4rpx;
				margin-right: 12rpx;
			}

			.store-name {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
			}
		}
	}

	.store-details {
		.rating-section {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.platform {
				background: #1890ff;
				color: #fff;
				font-size: 20rpx;
				padding: 4rpx 8rpx;
				border-radius: 4rpx;
				margin-right: 16rpx;
			}

			.rating {
				font-size: 28rpx;
				color: #333;
				margin-right: 8rpx;
			}

			.review-count, .delivery-time {
				font-size: 24rpx;
				color: #666;
				margin-right: 16rpx;
			}

			.environment-label {
				background: #f0f9ff;
				color: #1890ff;
				font-size: 20rpx;
				padding: 4rpx 8rpx;
				border-radius: 4rpx;
			}
		}
	}

	.coupon-section {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		overflow-x: auto;

		.coupon-item {
			display: flex;
			align-items: center;
			background: #fff2f0;
			border: 1rpx solid #ffb3ba;
			border-radius: 8rpx;
			padding: 8rpx 12rpx;
			margin-right: 16rpx;
			flex-shrink: 0;

			.coupon-content {
				display: flex;
				align-items: center;
				gap: 8rpx;

				.coupon-type, .coupon-desc {
					font-size: 22rpx;
					color: #ff4757;
				}

				.coupon-amount {
					font-size: 24rpx;
					color: #ff4757;
					font-weight: 600;
				}
			}

			.coupon-action {
				background: #ff4757;
				color: #fff;
				font-size: 20rpx;
				padding: 4rpx 8rpx;
				border-radius: 4rpx;
				margin-left: 12rpx;
			}
		}

		.more-coupons {
			font-size: 24rpx;
			color: #666;
			flex-shrink: 0;
		}
	}

	.store-tags {
		display: flex;
		align-items: center;
		gap: 16rpx;

		.tag {
			background: #f5f5f5;
			color: #666;
			font-size: 22rpx;
			padding: 8rpx 16rpx;
			border-radius: 16rpx;
		}
	}
}

// 推荐商品区域
.featured-section {
	background: #fff;
	padding: 30rpx;
	margin-bottom: 16rpx;

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}

		.section-more {
			font-size: 24rpx;
			color: #666;
		}
	}

	.featured-list {
		white-space: nowrap;

		.featured-items {
			display: flex;
			gap: 20rpx;
		}

		.featured-item {
			position: relative;
			width: 200rpx;
			flex-shrink: 0;

			.discount-badge {
				position: absolute;
				top: 8rpx;
				left: 8rpx;
				background: #00c853;
				color: #fff;
				font-size: 20rpx;
				padding: 4rpx 8rpx;
				border-radius: 4rpx;
				z-index: 2;
			}

			.featured-image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 8rpx;
			}

			.featured-name {
				font-size: 24rpx;
				color: #333;
				margin: 12rpx 0 8rpx;
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.featured-price {
				display: flex;
				align-items: center;
				gap: 8rpx;

				.current-price {
					font-size: 28rpx;
					color: #fa436a;
					font-weight: 600;
				}

				.original-price {
					font-size: 22rpx;
					color: #999;
					text-decoration: line-through;
				}
			}

			.add-btn {
				position: absolute;
				bottom: 8rpx;
				right: 8rpx;
				width: 48rpx;
				height: 48rpx;
				background: #fa436a;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}

// 分类导航
.category-nav {
	background: #fff;
	display: flex;
	padding: 0 30rpx;
	border-bottom: 1rpx solid #f0f0f0;

	.nav-item {
		flex: 1;
		text-align: center;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #333;
		border-bottom: 4rpx solid transparent;

		&:first-child {
			color: #fa436a;
			border-bottom-color: #fa436a;
		}
	}
}

// 筛选区域
.filter-section {
	background: #fff;
	padding: 20rpx 30rpx;
	margin-bottom: 16rpx;

	.filter-buttons {
		display: flex;
		align-items: center;
		gap: 20rpx;

		.filter-btn {
			display: flex;
			align-items: center;
			gap: 8rpx;
			padding: 12rpx 20rpx;
			border: 1rpx solid #e0e0e0;
			border-radius: 20rpx;
			font-size: 24rpx;
			color: #666;

			&.active {
				background: #ffe8e8;
				border-color: #fa436a;
				color: #fa436a;
			}
		}
	}
}

// 商品列表
.product-list {
	background: #fff;

	.product-item {
		display: flex;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.product-image-wrapper {
			position: relative;
			margin-right: 20rpx;

			.discount-tag {
				position: absolute;
				top: 8rpx;
				left: 8rpx;
				background: #00c853;
				color: #fff;
				font-size: 20rpx;
				padding: 4rpx 8rpx;
				border-radius: 4rpx;
				z-index: 2;
			}

			.product-image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
			}
		}

		.product-info {
			flex: 1;

			.product-name {
				font-size: 28rpx;
				color: #333;
				line-height: 1.4;
				margin-bottom: 8rpx;
				display: block;
			}

			.product-desc {
				font-size: 22rpx;
				color: #999;
				margin-bottom: 8rpx;
				display: block;
			}

			.product-stats {
				margin-bottom: 12rpx;

				.month-sales {
					font-size: 22rpx;
					color: #999;
				}
			}

			.product-price-row {
				display: flex;
				align-items: center;
				gap: 8rpx;

				.current-price {
					font-size: 32rpx;
					color: #fa436a;
					font-weight: 600;
				}

				.unit {
					font-size: 24rpx;
					color: #fa436a;
				}

				.original-price {
					font-size: 22rpx;
					color: #999;
					text-decoration: line-through;
				}
			}
		}

		.product-actions {
			display: flex;
			align-items: flex-end;

			.add-cart-btn {
				width: 56rpx;
				height: 56rpx;
				border: 2rpx solid #fa436a;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}

// 底部操作栏
.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	box-shadow: 0 -2rpx 12rpx rgba(0,0,0,0.1);
	z-index: 999;

	.cart-info {
		display: flex;
		align-items: center;
		flex: 1;

		.cart-icon-wrapper {
			position: relative;
			width: 80rpx;
			height: 80rpx;
			background: #fa436a;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;

			.cart-count {
				position: absolute;
				top: -8rpx;
				right: -8rpx;
				background: #ff4757;
				color: #fff;
				font-size: 20rpx;
				min-width: 32rpx;
				height: 32rpx;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 8rpx;
			}
		}

		.cart-amount {
			font-size: 28rpx;
			color: #333;
			font-weight: 600;
		}
	}

	.delivery-fee {
		font-size: 24rpx;
		color: #666;
	}
}

// 购物车弹窗
.cart-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;

	&.show {
		opacity: 1;
		visibility: visible;

		.cart-content {
			transform: translateY(0);
		}
	}

	.cart-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		max-height: 80vh;
		transform: translateY(100%);
		transition: transform 0.3s ease;
		display: flex;
		flex-direction: column;
	}
}

// 疾单助手横幅
.fast-order-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(90deg, #ffe8e8 0%, #fff0f0 100%);
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #f0f0f0;

	.banner-left {
		flex: 1;

		.banner-title {
			font-size: 28rpx;
			color: #fa436a;
			font-weight: 600;
			margin-right: 16rpx;
		}

		.banner-desc {
			font-size: 24rpx;
			color: #333;
		}
	}

	.banner-right {
		display: flex;
		align-items: center;
		color: #fa436a;
		font-size: 24rpx;
		gap: 8rpx;
	}
}

// 全选区域
.select-all-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;

	.select-all {
		display: flex;
		align-items: center;

		.checkbox {
			width: 40rpx;
			height: 40rpx;
			border: 2rpx solid #ddd;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 16rpx;

			&.checked {
				background: #fa436a;
				border-color: #fa436a;
			}
		}

		.select-text {
			font-size: 28rpx;
			color: #333;
			margin-right: 16rpx;
		}

		.total-info {
			font-size: 24rpx;
			color: #666;
		}
	}

	.clear-cart {
		display: flex;
		align-items: center;
		gap: 8rpx;
		color: #999;
		font-size: 24rpx;
	}
}

// 购物车列表
.cart-list {
	flex: 1;
	max-height: 50vh;

	.cart-item {
		display: flex;
		align-items: flex-start;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.item-checkbox {
			margin-right: 20rpx;
			padding-top: 20rpx;

			.checkbox {
				width: 40rpx;
				height: 40rpx;
				border: 2rpx solid #ddd;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				&.checked {
					background: #fa436a;
					border-color: #fa436a;
				}
			}
		}

		.item-image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
		}

		.item-info {
			flex: 1;

			.item-name {
				font-size: 28rpx;
				color: #333;
				line-height: 1.4;
				margin-bottom: 8rpx;
				display: block;
			}

			.item-spec {
				font-size: 22rpx;
				color: #999;
				margin-bottom: 8rpx;
				display: block;
			}

			.item-tags {
				margin-bottom: 8rpx;

				.item-tag {
					background: #fff2f0;
					color: #fa436a;
					font-size: 20rpx;
					padding: 4rpx 8rpx;
					border-radius: 4rpx;
					margin-right: 8rpx;
				}
			}

			.item-price-row {
				display: flex;
				align-items: center;
				gap: 8rpx;
				margin-bottom: 8rpx;

				.item-price {
					font-size: 32rpx;
					color: #fa436a;
					font-weight: 600;
				}

				.item-unit {
					font-size: 24rpx;
					color: #fa436a;
				}

				.item-original-price {
					font-size: 22rpx;
					color: #999;
					text-decoration: line-through;
				}
			}

			.item-promotion {
				font-size: 22rpx;
				color: #fa436a;
			}
		}

		.quantity-control {
			display: flex;
			align-items: center;
			gap: 20rpx;
			margin-top: 20rpx;

			.quantity-btn {
				width: 56rpx;
				height: 56rpx;
				border: 2rpx solid #fa436a;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #fff;
			}

			.quantity {
				font-size: 28rpx;
				color: #333;
				min-width: 40rpx;
				text-align: center;
			}
		}
	}
}

// 优惠提示
.promotion-tips {
	padding: 20rpx 30rpx;

	.tip-item {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
		gap: 16rpx;

		.tip-label {
			background: #fa436a;
			color: #fff;
			font-size: 20rpx;
			padding: 4rpx 8rpx;
			border-radius: 4rpx;
		}

		.tip-desc {
			font-size: 24rpx;
			color: #333;
		}

		.tip-status {
			font-size: 22rpx;
			color: #999;
			margin-left: auto;
		}
	}
}

// 购物车底部
.cart-bottom {
	background: #fff;
	border-top: 1rpx solid #f0f0f0;
	padding: 20rpx 30rpx;

	.price-summary {
		margin-bottom: 20rpx;

		.total-price {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 12rpx;

			.label {
				font-size: 28rpx;
				color: #333;
			}

			.amount {
				font-size: 32rpx;
				color: #fa436a;
				font-weight: 600;
			}
		}

		.discount-info {
			margin-bottom: 12rpx;

			.discount-item {
				display: flex;
				align-items: center;
				gap: 8rpx;

				.discount-text {
					font-size: 24rpx;
					color: #666;
				}

				.discount-amount {
					font-size: 24rpx;
					color: #fa436a;
					margin-left: auto;
					margin-right: 8rpx;
				}
			}
		}

		.delivery-info {
			.delivery-text {
				font-size: 22rpx;
				color: #999;
			}
		}
	}

	.checkout-btn {
		width: 100%;
		height: 80rpx;
		background: #fa436a;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
	}
}
</style>
